<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="description" content="长沙市妇幼医院">
    <title>填写信息</title>
    <link rel="stylesheet" href="css/fillInfo.css">
    <script src="./js/jquery.min.js"></script>
    <script src="js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
    var openId = '';
    $(document).ready(function(){
        var url = location.search.substr(1);
        var arr = url.split("&");
        openId = arr[0].split("=")[1];
//        alert("openId:"+openId);
        $.ajax({
            method: 'POST',
            url: '/csfy/wx/getPresonInfo.do',
            data: {},
            success: function (res) {
                //alert(res)
                var getData = JSON.parse(res);
                if (getData.code == 200 && getData.data != null) {
                    window.location.href = '/csfy/user/couponList.html?openId='+openId;
                }
            },
            error:function (res) {
                alert(JSON.parse(res).msg);
            }
        });
        resetSelect($('#province'), '', 11);
        //调用微信JSSDK配置
        $.ajax({
            type:"post",
            url:"/csfy/wx/getWxConfig.do",
            data:{
                url:window.location.href
            },
            success : function(data) {
                var getData = JSON.parse(data);
                var appId = getData.appId;
                var timestamp = getData.timestamp;
                var nonceStr = getData.nonceStr;
                var signature = getData.signature;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appId, // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature,// 必填，签名
                    jsApiList: ['chooseImage','uploadImage'] // 必填，需要使用的JS接口列表
                });
            }
        });
    })
    //
    //省市区
    function resetSelect(jq, parentId, defaultIdx) {
        var url = '/csfy/intf.do?method=getAddrs';
        if (parentId) {
            url = url + '&parentId=' + parentId;
        }
        var jqId = '#' + jq.attr('id');
        $.getJSON(url, function (data) {
            if (data.msg === 'success') {
                var optionHtml = '<option value="0">请选择</option>';
                jq.empty();
                $.each(data.rows, function (i, item) {
                    var option = $('<option></option>');
                    option.attr('value', item['code']);
                    option.text(item['name']);
                    optionHtml += '<option value="' + item['code'] + '">'+ item['name'] + '</option>';
                });
                jq.append(optionHtml);
                if (defaultIdx) {
                    jq.get(0).selectedIndex = defaultIdx;
                }

                if (jqId) {
                    addressChange(jqId);
                }
//                jq.selectpicker('refresh');
            }
        });
    }

    //选择地址
    function addressChange(id) {
        var code = $(id).children('option:selected').attr('value');
        //alert(code)
        switch (id) {
            case '#province':
            {
                var defaultIdx = undefined;
                if (code == 43) {
                    defaultIdx = 9;
                }
                resetSelect($('#city'), code, defaultIdx);
                $('#county').empty();
                $('#town').empty();
//                $('#county').selectpicker('refresh');
//                $('#town').selectpicker('refresh');
                break;
            }
            case '#city':
            {
                defaultIdx = 0;
                resetSelect($('#county'), code,defaultIdx);
                $('#town').empty();
//                $('#town').selectpicker('refresh');
                break;
            }
            case '#county':
            {
                defaultIdx = 0;
                resetSelect($('#town'), code,defaultIdx);
                break;
            }
            case '#town':
            {
                break;
            }
        }
    }

    //选择免费类型展示不同上传证件信息
    function typeSelect() {
        if($("#typeSelect option:selected").val() == 1){
            $(".typeInfo .imgInfo").css("display","none");
            $(".typeInfo .imgInfo").eq(0).css("display","block");
            $(".typeInfo .imgInfo").eq(1).css("display","block");
        }else if($("#typeSelect option:selected").val() == 2){
            $(".typeInfo .imgInfo").css("display","none");
            $(".typeInfo .imgInfo").eq(0).css("display","block");
            $(".typeInfo .imgInfo").eq(2).css("display","block");
            $(".typeInfo .imgInfo").eq(3).css("display","block");
            $(".typeInfo .imgInfo").eq(4).css("display","block");
        }else if($("#typeSelect option:selected").val() == 3){
            $(".typeInfo .imgInfo").css("display","none");
            $(".typeInfo .imgInfo").eq(5).css("display","block");
        }else {
            $(".typeInfo .imgInfo").css("display","none");
        }
    }
    //保存各类证件照的serverId
    var selfIdCard = '';
    var hukouben = '';
    var marriage = '';
    var husbandIdCard = '';
    var juzhuzheng = '';
    var $id = "";
    //上传证件照片
    function upLoadImg(imgType) {
        console.log(imgType);
        var imageType = '';
        if(imgType == 7 || imgType == 8){
            imageType = 7;
        }else {
            imageType = imgType;
        }
        //限制第一张必须上传女方身份证
        if($("#typeSelect option:selected").val() == 1 && imageType == 7){
            if(selfIdCard == ''){
                alert("请先上传女方身份证");
                return false;
            }
        }
        if($("#typeSelect option:selected").val() == 2 && (imageType == 3 || imageType == 7 || imageType == 4)){
            if(selfIdCard == ''){
                alert("请先上传女方身份证");
                return false;
            }
        }
        //选择照片或拍照
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album','camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                //获取本地图片地址res.localIds
                if(imgType == 1){//本人身份证
                    $(".selfIdCard").attr("src",res.localIds);
                }else if(imgType == 7){//本人户口本
                    $(".hukouben").attr("src",res.localIds);
                }else if(imgType == 3){//结婚证
                    $(".marriage").attr("src",res.localIds);
                }else if(imgType == 8){//丈夫户口本
                    $(".hukouben2").attr("src",res.localIds);
                }else if(imgType == 4){//丈夫身份证
                    $(".husbandIdCard").attr("src",res.localIds);
                }else if(imgType == 6){//本人居住证
                    $(".juzhuzheng").attr("src",res.localIds);
                }
                var localIds = res.localIds;

                //上传照片
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        //获取微信服务器图片下载地址res.serverId
//                        alert("上传图片成功："+res.serverId+"imageType："+imageType+"openId："+openId);
                        //alert("imageType："+imageType);
                        //alert("openId："+openId);
                        var serverId = res.serverId;
                        //调用后台ORC解析信息
                        $(".zhezhao2").css("display","block");
                        $(".loading").css("display","block");
                        $.ajax({
                            method: 'POST',
                            url: '/csfy/wx/getPresonInfo.do',
                            data: {
                                openId: openId,
                                imgType: imageType,
                                mediaId: serverId,
                                presonType: $("#typeSelect").val(),
                                id : $id,
                                withImgCode: "1"
                            },
                            success: function (res) {
//                                alert(res)
                                var getData = JSON.parse(res);
                                if(getData.code == 200){
                                    $(".zhezhao2").css("display","none");
                                    $(".loading").css("display","none");
                                    //填写解析信息到确认框
                                    if(imageType == 1 || imageType == 6){
                                        $("#userName").val(getData.data.name);
                                        $("#userSex").val(getData.data.sex);
                                        $("#nation").val(getData.data.nation);
                                        $id = getData.data.id;
                                        $("#userIdNum").val($id);
                                        $("#address").val(getData.data.address);
                                        $(".zhezhao").css("display","block");
                                        $(".userInfo").css("display","block");
                                        $(".userInfo").css("display","block");
                                    }
                                    //获取服务器图片地址，提交时统一保存
                                    if(imgType == 1){//本人身份证
                                        if(getData.data.cardFrontImgUrl != null && getData.data.cardFrontImgUrl.indexOf("/.") == -1){
                                            selfIdCard = getData.data.cardFrontImgUrl;
                                        }else {
                                            selfIdCard = "";
                                            alert("女方身份证上传失败，请重新选择上传");
                                        }
                                    }else if(imgType == 7){//本人户口本
                                        if(getData.data.familyRegisterImgUrl != null && getData.data.familyRegisterImgUrl.indexOf("/.") == -1){
                                            hukouben = getData.data.familyRegisterImgUrl;
                                        }else {
                                            hukouben = "";
                                            alert("女方户口本上传失败，请重新选择上传");
                                        }
                                    }else if(imgType == 3){//结婚证
                                        if(getData.data.marriageImgUrl != null && getData.data.marriageImgUrl.indexOf("/.") == -1){
                                            marriage = getData.data.marriageImgUrl;
                                        }else {
                                            marriage = "";
                                            alert("结婚证上传失败，请重新选择上传");
                                        }
                                    }else if(imgType == 8){//丈夫户口本
                                        if(getData.data.familyRegisterImgUrl != null && getData.data.familyRegisterImgUrl.indexOf("/.") == -1){
                                            hukouben = getData.data.familyRegisterImgUrl;
                                        }else {
                                            hukouben = "";
                                            alert("丈夫户口本上传失败，请重新选择上传");
                                        }
                                    }else if(imgType == 4){//丈夫身份证
                                        if(getData.data.cardMateImgUrl != null && getData.data.cardMateImgUrl.indexOf("/.") == -1){
                                            husbandIdCard = getData.data.cardMateImgUrl;
                                        }else {
                                            husbandIdCard = "";
                                            alert("丈夫身份证上传失败，请重新选择上传");
                                        }
                                    }else if(imgType == 6){//本人居住证
                                        if(getData.data.residencePermitImgUrl != null && getData.data.residencePermitImgUrl.indexOf("/.") == -1){
                                            juzhuzheng = getData.data.residencePermitImgUrl;
                                        }else {
                                            juzhuzheng = "";
                                            alert("居住证上传失败，请重新选择上传");
                                        }
                                    }
                                }else {
                                    alert(getData.msg);
                                }
                            },
                            error:function (res) {
                                $(".zhezhao2").css("display","none");
                                $(".loading").css("display","none");
                                alert(JSON.parse(res).msg);
                            }
                        })
                    },
                    fail: function(res) {
//                        alert(JSON.stringify(res));
                        alert("该图片上传失败，请重新选择上传");
                    }
                });
            }
        });
    }
    //提交
    function submitDiv() {
        $(".submitDiv").css("pointer-events","none");
//        alert("点击提交");
        var postData = {
            openId : openId,
            province:$("#province option:selected").text().replace(/\s+/g, ""),
            city:$("#city option:selected").text().replace(/\s+/g, ""),
            country:$("#county option:selected").text().replace(/\s+/g, ""),
            town:$("#town option:selected").text().replace(/\s+/g, ""),
            name:$("#userName").val(),
            sex:$("#userSex option:selected").val(),
            nation:$("#nation").val(),
            id:$("#userIdNum").val(),
            address:$("#address").val(),
            presonType:$("#typeSelect option:selected").val()
        };
        //判断常住地址不能有空
        if((postData.province == "" || postData.city == "" || postData.country == "" || postData.town == "") || postData.province == "请选择" || postData.city == "请选择" || postData.country == "请选择" || postData.town == "请选择"){
            alert("请输入完整的常住地址信息");
            $(".submitDiv").css("pointer-events","auto");
            return false;
        }
        //判断证件信息是否上传
        var typeInfo = $("#typeSelect option:selected").val();
        if(typeInfo == 1){
            if(selfIdCard == "" || hukouben == ""){
                alert("请同时上传本人身份证件和户口本");
                $(".submitDiv").css("pointer-events","auto");
                return false;
            }else {
                postData.cardFrontImgUrl = selfIdCard;
                postData.familyRegisterImgUrl = hukouben;
            }
        }else if(typeInfo == 2){
            if(selfIdCard == "" || marriage == "" || hukouben == "" || husbandIdCard == ""){
                alert("请上传完整的证件资料");
                $(".submitDiv").css("pointer-events","auto");
                return false;
            }else {
                postData.cardFrontImgUrl = selfIdCard;
                postData.marriageImgUrl = marriage;
                postData.familyRegisterImgUrl = hukouben;
                postData.cardMateImgUrl = husbandIdCard;
            }
        }else if(typeInfo == 3){
            if(juzhuzheng == ""){
                alert("请上传本人长沙居住证");
                $(".submitDiv").css("pointer-events","auto");
                return false;
            }else {
                postData.residencePermitImgUrl = juzhuzheng;
            }
        }else {
            alert("请选择免费类型");
            $(".submitDiv").css("pointer-events","auto");
            return false;
        }
//        alert("证件完成");
        //验证手机号码格式
        var pattern = /^1[3456789]\d{9}$/;
        var mobNo = pattern.test($('#phoneNum').val());
        if(!mobNo){
            alert('请输入正确的手机号码！');
            $(".submitDiv").css("pointer-events","auto");
            return false;
        }else {
            postData.mobile = $('#phoneNum').val();
            postData.mobileNo = $('#phoneNum').val();
        }
        //校验短信验证码格式
        if($("#mobileCode").val().length != 6){
            alert('请输入6位短信验证码');
            $(".submitDiv").css("pointer-events","auto");
            return false;
        }else {
            postData.mobileCode = $("#mobileCode").val();
        }
        //保存信息
        $.ajax({
            method: 'POST',
            url: '/csfy/wx/savePersonInfo.do',
            data: postData,
            success: function (res) {
//                alert("保存信息"+res)
                var getData = JSON.parse(res);
                if (getData.code == 200 && getData.data != null) {
                    localStorage.setItem("idcardType",$("#typeSelect option:selected").val());
                    window.location.href = '/csfy/user/couponList.html?openId='+openId+'&a='+new Date().getTime();
                }else {
                    alert(getData.msg);
                    $(".submitDiv").css("pointer-events","auto");
                }
            },
            error:function (res) {
//                alert("报错" + JSON.stringify(res));
                alert(JSON.parse(res).msg);
                $(".submitDiv").css("pointer-events","auto");
            }
        })
    }
    //确认ORC信息弹窗
    function confirm() {
        if($("#userName").val() == "" || $("#userSex option:selected").val() == "" || $("#nation").val() == "" || $("#userIdNum").val() == "" || $("#address").val() == ""){
            alert("请确认您的信息完整！");
            return false;
        }
        if($("#userSex option:selected").val() != "女"){
            alert("性别必须为女！");
            return false;
        }
        //验证身份证格式
        var pattern = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[01])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
        var mobNo = pattern.test($("#userIdNum").val());
        if(!mobNo){
            alert('请输入正确的身份证号码！');
            return false;
        }
        $(".userName").text($("#userName").val());
        $(".userSex").text($("#userSex option:selected").val());
        $(".nation").text($("#nation").val());
        $(".userIdNum").text($("#userIdNum").val());
        $(".address").text($("#address").val());
        $(".querenInfo").css("display","block");
        $(".zhezhao").css("display","none");
        $(".userInfo").css("display","none");
        $(".chooseClose").css("display","none");
    }

    //获取短信验证码
    function countdown() {
        $(".countdown").css("pointer-events","none");
        //验证手机号码格式
        var pattern = /^1[3456789]\d{9}$/;
        var mobNo = pattern.test($('#phoneNum').val());
        if(!mobNo){
            alert('请输入正确的手机号码！');
            $(".countdown").css("pointer-events","auto");
            return false;
        }
        //倒计时
        var count = 60;
        var timer = setInterval(function () {
            count--;
            $(".countdown").css("background","#ccc").text(count + "S");
            if(count <= 0){
                clearInterval(timer);
                $(".countdown").css("background","#337ab7").text("重新获取");
                $(".countdown").css("pointer-events","auto");
            }
        },1000);
        $.ajax({
            method: 'POST',
            url: '/csfy/wx/getSMSCode.do',
            data:{
                mobileNo: $('#phoneNum').val()
            },
            success: function (res) {
//                alert("获取验证码："+res);
                var dataInfo = JSON.parse(res);
                if(dataInfo.code != 200){
                    alert("短信验证码获取失败，请重试");
                    clearInterval(timer);
                    $(".countdown").css("background","#337ab7").text("重新获取");
                    $(".countdown").css("pointer-events","auto");
                }
            }
        })
    }
</script>
<body>
<ul class="addressInfo">
    <li><span>常住地址</span><span class="span-right">请务必准确填写长沙户籍户口本地址或居住证居住地址</span></li>
    <li>
        <span>省　　份</span>
        <select id="province" onchange="addressChange('#province')" disabled="disabled" class="selectpicker form-control" data-live-search="true" data-max-options="1">
            <option value="">请选择</option>
        </select>
    </li>
    <li>
        <span>城　　市</span>
        <select id="city" onchange="addressChange('#city')" disabled="disabled" class="selectpicker form-control" data-live-search="true" data-max-options="1">
            <option value="">请选择</option>
        </select>
    </li>
    <li>
        <span>地　　区</span>
        <select id="county" onchange="addressChange('#county')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
            <option value="">请选择</option>
        </select>
    </li>
    <li>
        <span>街　　道</span>
        <select id="town" onchange="addressChange('#town')" class="selectpicker form-control" data-live-search="true" data-max-options="1">
            <option value="">请选择</option>
        </select>
    </li>
    <li>
        <span>手机号码</span>
        <input type="number" id="phoneNum">
    </li>
    <li>
        <span>　验证码</span>
        <input type="number" id="mobileCode" style="width: 100px;flex: none;">
        <span style="width: 90px;background: #337ab7;color: #fff;font-weight: 100;font-size: 12px;border-radius: 20px;text-align: center;" class="countdown" onclick="countdown()">获取验证码</span>
    </li>
</ul>
<ul class="typeInfo">
    <li>身份验证</li>
    <li>
        <span>免费类型</span>
        <select name="" id="typeSelect" onchange="typeSelect()">
            <option value="">选择类型</option>
            <option value="1">本人户口为长沙户口</option>
            <option value="2">丈夫户口为长沙户口</option>
            <option value="3">女方拥有长沙居住证</option>
        </select>
    </li>
    <li class="querenInfo" style="display: none">
        <div>
            <span>姓　　名：</span>
            <span class="userName span-right"></span>
        </div>
        <div>
            <span>性　　别：</span>
            <span class="userSex span-right"></span>
        </div>
        <div>
            <span>民　　族：</span>
            <span class="nation span-right"></span>
        </div>
        <div>
            <span>证件号码：</span>
            <span class="userIdNum span-right"></span>
        </div>
        <div>
            <span>户籍地址：</span>
            <span class="address span-right"></span>
        </div>
    </li>
    <li class="imgInfo chooseClose">
        <span onclick="upLoadImg(1)">上传女方身份证</span>
        <img class="selfIdCard" src="images/idcardSample.png" alt="">
    </li>
    <li class="imgInfo">
        <span onclick="upLoadImg(7)">上传本人户口本</span>
        <img class="hukouben" src="images/hkbSample.jpg" alt="">
    </li>
    <li class="imgInfo">
        <span onclick="upLoadImg(3)">上传结婚证</span>
        <img class="marriage" src="images/jhzSample.jpg" alt="">
    </li>
    <li class="imgInfo">
        <span onclick="upLoadImg(8)">上传丈夫户口本</span>
        <img class="hukouben2" src="images/hkbSample.jpg" alt="">
    </li>
    <li class="imgInfo">
        <span onclick="upLoadImg(4)">上传丈夫身份证</span>
        <img class="husbandIdCard" src="images/idcardSample.png" alt="">
    </li>
    <li class="imgInfo chooseClose">
        <span onclick="upLoadImg(6)">上传长沙居住证</span>
        <img class="juzhuzheng" src="images/jzzSample.jpg" alt="">
    </li>
</ul>
<div class="submitDiv" onclick="submitDiv()">提交审核</div>
<div class="zhezhao"></div>
<div class="zhezhao2"></div>
<div class="loading">上传中...</div>
<ul class="userInfo">
    <li style="padding: 0 20px">请仔细核对身份信息是否正确，否则会造成优惠券不能使用</li>
    <li>
        <span>姓　　名</span>
        <input type="text" id="userName">
    </li>
    <li>
        <span>性　　别</span>
        <select name="" id="userSex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </li>
    <li>
        <span>民　　族</span>
        <input type="text" id="nation">
    </li>
    <li>
        <span>证件号码</span>
        <input type="text" id="userIdNum">
    </li>
    <li>
        <span>户籍地址</span>
        <input type="text" id="address">
    </li>
    <li>
        <span class="confirm" onclick="confirm()">确　认</span>
    </li>
</ul>
</body>

</html>